<!--俄动力管理平台-->
<!--用户权限说明-->
<!--管理员：代码：1，可以做所有的操作-->
<!--问题编辑人员：代码：2，可以做问题的修改操作-->
<template>
  <div style="margin: 0;padding: 0">
    <el-container>
      <!--页面表头设计-->
      <el-header style="height: 7vh">
        <span class="center-text">俄动力管理平台</span>
        <el-popover
            placement="top-start"
            title="用户信息"
            width="200"
            trigger="hover">
          <div style="margin-top: 10px">Name：{{useName}}</div>
          <div style="margin-top: 10px">ID:{{useId}}</div>
          <div style="margin-top: 10px" @click="logOut"><el-link>退出</el-link></div>
          <div class="headMain" slot="reference">{{useName}}</div>
        </el-popover>
      </el-header>
      <div style="margin-top: 9px">
        <el-carousel :interval="5000" arrow="always" height="72vh">
          <el-carousel-item v-for="item in 4" :key="item"  >
            <h3>{{ item }}</h3>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div style="margin-bottom: 7px; margin-top: 19px">
        <el-row :gutter="20" justify="space-between">
          <el-col :span="12" style="display: flex; justify-content: center; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); padding: 12px; border-radius: 4px">
            <el-button type="primary" round>质量</el-button>
            <el-button type="success" round>经营</el-button>
            <el-button type="primary" round>生产</el-button>
            <el-button type="success" round>物流</el-button>
          </el-col>
          <el-col :span="12" style="display: flex; justify-content: center; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); padding: 12px; border-radius: 4px">
            <el-button type="info" round>品质技术部</el-button>
            <el-button type="warning" round>制造部</el-button>
            <el-button type="danger" round>生管物流科</el-button>
            <el-button type="info" round>综合管理科</el-button>
          </el-col>
        </el-row>
      </div>
    </el-container>

    <!--弹窗放置区-->


    <!--抽屉放置区域-->
  </div>
</template>
<script>
export default {
  name: "russianManagementMain",
  data() {
    return {
      //用户权限相关的变量
      useName:'',//用户名称
      useId:'',//用户编号
      usePower:'',//用户权限
    }
  },
  methods:{
    //退出登录
    logOut(){
      localStorage.removeItem('u_token');
      localStorage.removeItem('userName')
      this.$router.push('UserLogin')
    },
    //查询用户信息的函数
    inquiry(){
      //输入用户编号，向后端查询信息
      const useId=localStorage.getItem('userName').replace(/"/g, '');
      this.$request.post('/useQueryPower',{
        queryFiledName:'russianManagementMain',
        userId:useId,
      }).then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        }else {
          this.useName=result.data.name
          this.usePower=result.data.changeModel
          this.useId=useId
          console.log(this.useId,this.usePower,this.useName)
        }
      })
    },
  },
  mounted() {
    this.inquiry()
  }
}
</script>

<style scoped>
/* 主体左侧的工作步骤栏用到的数据包围的div的样式*/

.el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  border-left-color: white;
  border-top: white;
}

.el-aside {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  height: 89vh;
}

.el-main {
  color: #333;
  text-align: center;
  border-left-color: white;
  padding: 10px; /* 添加内边距 */
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.headMain{
  color: #ffffff; /* 设置字体颜色为红色 */
  font-size: 18px;
}
.center-text {
  /* 使用 margin-left 和 margin-right auto 来实现居中效果 */
  margin-left: auto;
  margin-right: auto;
  /* 注意：如果 header 内只有这两个元素，你可能不需要 margin-right: auto */
}

/*自定义样式*/
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

body, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  width: 100%;
}

.el-container {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

/* 修改你的行布局 */
.el-row {
  margin: 0 !important;
  width: 100% !important;
}

/* 确保carousel不溢出 */
.el-carousel {
  width: 100%;
  max-width: 100vw;
}
</style>